<template>
  <div class="error-page">
    <div>
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="query.productid"
            placeholder="请输入产品编号/名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="query.producttype"
            placeholder="请选择产品类型"
            clearable
          >
            <el-option
              v-for="(a, index) in bindType"
              :key="index"
              :label="a.text"
              :value="a.text"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.state" placeholder="请选择状态" clearable>
            <el-option
              v-for="(a, index) in bindState"
              :key="index"
              :label="a.text"
              :value="a.text"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="query.productproperty"
            placeholder="请选择产品属性"
            clearable
          >
            <el-option
              v-for="(a, index) in bindProperty"
              :key="index"
              :label="a.text"
              :value="a.text"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="query.productclassid"
            :options="options"
            :props="props1"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCha">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>产品管理</div>
    <br />
    <div><el-button type="primary" @click="tiao()">新增</el-button></div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column property="id" label="序号" width="120"></el-table-column>
      <el-table-column label="产品编号" width="120">
        <template #default="scope">
          <span @click="zhuan(scope.row.id)">{{ scope.row.productid }}</span>
        </template>
      </el-table-column>
      <el-table-column
        property="productname"
        label="产品名称"
        width="120"
      ></el-table-column>
      <el-table-column
        property="specification"
        label="规格型号"
        width="120"
      ></el-table-column>
      <el-table-column
        property="units"
        label="单位"
        width="120"
      ></el-table-column>
      <el-table-column
        property="producttype"
        label="产品类型"
        width="120"
      ></el-table-column>
      <el-table-column
        property="productproperty"
        label="产品属性"
        width="120"
      ></el-table-column>
      <el-table-column
        property="classname"
        label="产品分类"
        width="120"
      ></el-table-column>
      <el-table-column property="state" label="状态" width="120">
        <template #default="scope">
          <span v-if="scope.row.state == 1">启用</span>
          <span v-if="scope.row.state == 2">禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <el-button type="text">编辑</el-button>
        <el-button type="text">删除</el-button>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="query.pageindex"
        v-model:page-size="query.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { ProductShow, ProductClassShow } from "../../api/product";
import { GetDictionary } from "../../api/Dictionaries";

export default {
  setup() {
    const tableData = ref([]);
    const totalCount = ref(0);
    const bindType = ref({});
    const bindState = ref({});
    const bindProperty = ref({});
    const options = ref([]);
    const router = useRouter();
    const query = reactive({
      pageindex: 1,
      pagesize: 5,
      productid: "",
      producttype: "",
      state: null,
      productproperty: "",
      productclassid: null,
    });
    const getCha = () => {
      query.productclassid = parseInt(query.productclassid[length + 1]);
      getData();
    };
    // 获取表格数据
    const getData = () => {
      console.log(query.productclassid);
      ProductShow(query).then((res) => {
        tableData.value = res.result.items;

        totalCount.value = res.result.totalCount || 50;
      });
      GetDictionary("产品类型").then((res) => {
        bindType.value = res.result;
      });
      GetDictionary("状态").then((res) => {
        bindState.value = res.result;
      });
      GetDictionary("产品属性").then((res) => {
        bindProperty.value = res.result;
      });
      ProductClassShow().then((res) => {
        options.value = res.result;
        console.log(options.value);
      });
    };
    getData();
    const props1 = {
      checkStrictly: true,
    };
    const tiao = () => {
      router.push({ path: "/ProductInsert" });
    };
    const Chan = () => {
      getData();
    };
    const zhuan = (id) => {
      router.push({ path: "/ProductSelect", query: { id: id } });
    };
    // 查询操作
    const handleSearch = () => {
      getData();
    };

    // 分页导航
    const handleSizeChange = (val) => {
      query.pagesize = val;
      getData();
    };
    // 分页导航
    const handleCurrentChange = (val) => {
      query.pageindex = val;
      getData();
    };
    // 删除操作
    // const handleDelete = (index) => {
    //   // 二次确认删除
    //   ElMessageBox.confirm("确定要删除吗？", "提示", {
    //     type: "warning",
    //   })
    //     .then(() => {
    //       ElMessage.success("删除成功");
    //       tableData.value.splice(index, 1);
    //     })
    //     .catch(() => {});
    // };

    // 表格编辑时弹窗和保存
    //const editVisible = ref(false);
    //字段
    // let form = reactive({
    //   targetForm: "",
    //   codingName: "",
    //   generateType: "",
    //   initialNumber: undefined,
    // });
    //let idx = -1;
    // const handleEdit = (index, row) => {
    //   idx = index;
    //   CodingGetId(row.id).then((item) => {
    //     Object.assign(form, item.result);
    //   });
    //   editVisible.value = true;
    // };
    // const saveEdit = () => {
    //   editVisible.value = false;
    //   PutCoding(form).then((item) => {
    //     ElMessage.success("修改成功");
    //     getData();
    //   });
    // };
    return {
      query,
      tableData,
      totalCount,
      //editVisible,
      //form,
      bindType,
      bindState,
      bindProperty,
      options,
      props1,
      router,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      //handleDelete,
      //handleEdit,
      //saveEdit,
      Chan,
      tiao,
      zhuan,
      getCha,
    };
  },
};
</script>